<template>
	<div id="ShopPage">
		<div class="hd_bg" v-bind:style="{'background-image':'url(http://pm.haowenwan.com/public/static/images/shop_bg_title.png)'}">

		</div>
		<div class="hidden">
			<x-header :left-options="{showBack: false}" class="header">
				<a slot="left" @click="back()"><i class="dec icon-back-white"></i></a>
				<a slot="right" @click="shopQrcode()"><i class="dec icon-qrcode-shop"></i></a>
			</x-header>
			<div class="content">
				<img v-if="storeMate.shop_id == undefined" src="../assets/images/home/defaultImg.jpg" alt="" class="thumb" />
				<img v-else :src="'/los/uploads/thumb/shop/' + storeMate.shop_id + '_72X72.jpeg'" alt="" class="thumb" />
				<div class="name">
					<p>{{storeMate.shop_name}}</p>
					<img v-if="storeMate.shop_vip > 0" src="../assets/images/home/icon_identify_logo.png" alt="" />
				</div>
				<span class="atten" v-if="storeMate.follow_state == 0" @click="shopConcern(storeMate.shop_id)">+ 关注</span>
				<span class="atten" v-else @click="shopConcern(storeMate.shop_id)">已关注</span>
				<p class="desc">
					<span>{{storeMate.auction_count}}拍品 </span>
					<img src="../assets/images/home/icon_rhomb.png" alt="" />
					<span> 粉丝 {{storeMate.shop_follow_num}} </span>
					<img src="../assets/images/home/icon_rhomb.png" alt="" />
					<span> 访客 {{storeMate.shop_vcount}} </span>
				</p>
			</div>
		</div>
		<x-dialog v-model="shopShare" hide-on-blur>
			<div class="img-box">
				<!--<img :src="'/los/uploads/thumb/shop_invite/' + storeMate.shop_id + '.png'" style="max-width:100%">-->
			</div>
		</x-dialog>
		<!--<div class="stract">
			<div class="scribe">
				简介:大家都知道,篆刻技艺如此精湛,和研究各类书法是分不开的,为了更好的篆刻技术而不断地演练书法,书法和研究各
			</div>
		</div>-->
		<div class="shopWrap">
			<div class="title_tab">
				<tab :class="tabBarFixed == true ? 'isFixed' :''" :line-width=2 active-color='#a30000' custom-bar-width="60px">
					<tab-item class="vux-center" :selected="item.name =='拍卖中'" v-for="item in list" @on-item-click="tabChange(item.type)" :key="item.type">{{item.name}}</tab-item>
				</tab>
			</div>
			<div class="item" v-if="selected == 1">
				<div v-if="infoList == ''">
					<div class="no-data">
						<img src="../assets/images/home/nodata.png" />
					</div>
				</div>
				<div class="storeWrap" v-else>
					<ul>
						<li v-for="(item,index) in infoList">
							<router-link :to="'/Detail/id/' + item.auction_id">
								<img class="bg_img" :src="'/los/uploads/thumb/goods/' + item.goods_id  + '_710X360.jpeg'" alt="" />
								<div class="zhe">
									<span class="recom">店铺推荐</span>
									<div class="zhe_img">
										<p><span>拍卖有漏</span><b>收藏无忧</b></p>
										<img src="../assets/images/home/zhezhao.png" alt="" />
									</div>
									<div class="advance">
										<p class="left">预告 &nbsp;|&nbsp;&nbsp;
											<count-down v-if="cache" :currentTime="curTime" :startTime="item.auction_starttime" :endTime="item.auction_endtime" :tipText="'距开始'" :tipTextEnd="'距结束'" :endText="'已结束'" :dayTxt="':'" :hourTxt="':'" :minutesTxt="':'" :secondsTxt="''">
											</count-down>
										</p>
										<p class="right">共{{item.bidding_count}}件拍品</p>
									</div>
								</div>
							</router-link>
						</li>

					</ul>
				</div>
			</div>
			<div class="item" v-if="selected== 2">
				<div class="selling" v-if="infoList == ''">
					<div class="no-data">
						<img src="../assets/images/home/nodata.png" />
					</div>
				</div>
				<div class="selling" v-else>
					<ul>
						<li v-for="(item,index) in infoList">
							<router-link :to="'/Detail/id/' + item.auction_id">
								<img class="list_bg" :src="'/los/uploads/thumb/goods/' + item.goods_id  + '_344X414.jpeg'" alt="" />
								<div class="Info">
									<span>拍卖中</span>
									<p>
										<count-down v-if="cache" :currentTime="curTime" :startTime="item.auction_starttime" :endTime="item.auction_endtime" :tipText="'距开始'" :tipTextEnd="'距结束'" :endText="'已结束'" :dayTxt="':'" :hourTxt="':'" :minutesTxt="':'" :secondsTxt="''">
										</count-down>
									</p>
								</div>
								<div class="desc">
									<p class="title">{{item.goods_name}}</p>
									<p class="price"> <span>当前价</span><b>￥{{item.auction_bidprice}}</b></p>
								</div>
							</router-link>
						</li>
					</ul>
				</div>
			</div>
			<div class="item" v-if="selected== 3">
				<div class="selling" v-if="infoList == ''">
					<div class="no-data">
						<img src="../assets/images/home/nodata.png" />
					</div>
				</div>
				<div class="selling" v-else>
					<ul>
						<li v-if="infoList == ''">
							<div class="no-data">
								<img src="../assets/images/home/nodata.png" />
							</div>
						</li>
						<li v-for="(item,index) in infoList">
							<router-link :to="'/Detail/id/' + item.auction_id">
								<img class="list_bg" :src="'/los/uploads/thumb/goods/' + item.goods_id  + '_172X207.jpeg'" alt="" />
								<div class="Info">
									<span>已结束</span>
									<p>
										<count-down v-if="cache" :currentTime="curTime" :startTime="item.auction_starttime" :endTime="item.auction_endtime" :tipText="'距开始'" :tipTextEnd="'距结束'" :endText="'已结束'" :dayTxt="':'" :hourTxt="':'" :minutesTxt="':'" :secondsTxt="''">
										</count-down>
									</p>
								</div>
								<div class="desc">
									<p class="title">{{item.goods_name}}</p>
									<p class="price"> <span>当前价</span><b>￥{{item.auction_bidprice}}</b></p>
								</div>
							</router-link>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<loading :show="show1" :text="text1"></loading>
		<toast v-model="success" type="text" width='2.8rem' is-show-mask>{{msg}}</toast>
	</div>
</template>

<script>
	import $ from 'jquery'
	import CountDown from 'vue2-countdown'
	import BScroll from 'better-scroll'
	import QRCode from 'qrcode'
	import axios from 'axios'
	import { XHeader, Card, Tab, TabItem, Swiper, SwiperItem, Sticky, ViewBox, Toast, Loading, XDialog } from 'vux'

	export default {
		data() {
			return {
				list: [{
						name: '预展中',
						type: '1'
					},
					{
						name: '拍卖中',
						type: '2'
					},
					{
						name: '已结束',
						type: '3'
					},
				],
				selected: 1,
				index: 0,
				cache: false,
				infoList: [],
				flag: true,
				success: false,
				tabBarFixed: false,
				msg: '',
				show1: false,
				text1: '加载中',
				curTime: '',
				storeMate: [],
				shop_logo: '',
				imgUrl: '',
				change: false,
				globals: '',
				shopShare: false
			}
		},
		components: {
			XHeader,
			Card,
			Tab,
			TabItem,
			Swiper,
			SwiperItem,
			Sticky,
			CountDown,
			BScroll,
			ViewBox,
			Toast,
			Loading,
			XDialog
		},
		created() {
			this.getShopMate();
			this.tabChange(2);
			this.VisitNum();
		},
		activated() {
			window.addEventListener('scroll', this.handleScroll);
		},
		beforeRouteLeave(to, from, next) {
			if(to.name == 'Detail') {
				from.meta.keepAlive = true; // 跳转到 详情页时，店铺页面缓存，即不刷新
			} else {
				from.meta.keepAlive = false;
			}
			next();
		},
		deactivated() {
			window.removeEventListener('scroll', this.handleScroll);
		},
		destroyed() {
			window.removeEventListener('scroll', this.handleScroll);
		},
		methods: {
			Click: function() {
				location.href = '#/ShopDetail'
			},
			shopQrcode: function() {
				this.shopShare = !this.shopShare;
				$('.img-box').html('<img src="/uploads/shop/invite_qrcode/' + this.storeMate.shop_id + '.jpeg" style="max-width:100%">')
			},
			//获取店铺资料
			getShopMate: function() {
				let shop_id = this.$route.params.id;
				this.$http({
					method: 'GET',
					url: '/los/api/shop/details.json?shop_id=' + shop_id,
					data: ''
				}).then((result) => {
					this.storeMate = result.data.data;
					this.imgUrl = '/los' + this.storeMate.banner_src;
				}).catch((err) => {
					console.log(err);
				})
			},

			//店铺浏览量
			VisitNum: function() {
				let shop_id = this.$route.params.id;
				this.$http({
					method: 'GET',
					url: '/los/api/shop/visiting.json?shop_id=' + shop_id,
					data: ''
				}).then((result) => {

				}).catch((err) => {
					console.log(err);
				})
			},
			//店铺关注成功
			shopConcern: function(shop_id) {
				this.$http({
					method: 'POST',
					url: '/los/api/shop/follow.json?shop_id=' + shop_id,
					data: ''
				}).then((result) => {
					this.success = !this.success;
					this.msg = result.data.msg;
					this.$nextTick(() => {
						this.getShopMate();
					})
				}).catch((err) => {
					console.log(err);
				})
			},

			//tab切换时 获取当前选项卡的值
			tabChange(index) {
				let _this = this;
				this.globals = index;
				let shop_id = this.$route.params.id;
				this.selected = index;
				let more = true;
				let page = 1;
				this.$http({
					method: 'GET',
					url: '/los/api/shop/auction_list.json?ts=' + this.selected + '&shop_id=' + shop_id,
					data: ''
				}).then((result) => {
					this.infoList = result.data.data;
					this.curTime = result.data.cur_time;
					this.cache = false;
					this.$nextTick(() => {
						this.cache = true;
					});
				}).catch((err) => {
					console.log(err);
				})
				$(window).scroll(function() {
					var htmlHeight = $(document).height();
					var clientHeight = $(window).height();
					var scrollTop = $(document).scrollTop();
					var overHeight = scrollTop + clientHeight;
					if(overHeight >= htmlHeight * 0.9) {
						if(more == true) {
							more = false;
							page += 1;
							if(_this.globals == index) {
								axios.get('/los/api/shop/auction_list.json?ts=' + index + '&page=' + page + '&shop_id=' + shop_id)
									.then(function(result) {
										$.each(result.data.data, function(index, val) {
											_this.infoList.push(val);
										});
										more = true;
										if(page > result.data.page_count) {
											more = false;
										}
									}).catch(function(error) {
										console.log(error);
									});
							}
						}
					}
				})
			},
			//滚动的函数
			handleScroll() {
				var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
				var offsetTop = document.querySelector('.shopWrap .title_tab').offsetTop
				if(scrollTop > offsetTop) {
					this.tabBarFixed = true;
				} else {
					this.tabBarFixed = false;
				}
			},
			back: function() {
				window.history.go(-1);
			},
		}
	}
</script>

<style scoped>
	#ShopPage {
		position: relative;
		background: #fff;
	}
	
	.isFixed {
		position: fixed;
		z-index: 999;
		width: 100%;
		top: 0;
	}
	
	.no-data {
		width: 2.96rem;
		height: 2.96rem;
		margin: 2rem auto;
	}
	
	.no-data img {
		width: 100%;
	}
	
	.header {
		background-color: transparent !important;
	}
	
	.dec {
		width: 0.48rem;
		height: 0.48rem;
		background-size: 100% 100%;
		background-position: 0 0;
		display: inline-block;
	}
	
	.hd_bg {
		width: 100%;
		height: 7.78rem;
		background-size: 100% 100%;
		z-index: 999;
	}
	
	.hidden {
		width: 100%;
		height: 7.78rem;
		position: absolute;
		top: 0;
	}
	
	.content {
		width: 100%;
		text-align: center;
	}
	
	.content .thumb {
		width: 1.89rem;
		height: 1.89rem;
		margin-top: 0.72rem;
		border: solid 2px #fff;
	}
	
	.content .name {
		overflow: hidden;
		margin-top: 0.4rem;
		width: 100%;
		text-align: center;
	}
	
	.content .name p {
		display: inline-block;
		color: #fff;
		font-size: 0.4rem;
	}
	
	.content .name img {
		width: 0.37rem;
		height: 0.37rem;
	}
	
	.content .atten {
		display: inline-block;
		width: 1.78rem;
		height: 0.56rem;
		background: #d64242;
		text-align: center;
		line-height: 0.56rem;
		color: #fff;
		font-size: 0.34rem;
		margin-top: 0.26rem;
		border-radius: 0.1rem;
	}
	
	.content .desc {
		margin-top: 0.56rem;
		font-size: 0.37rem;
		color: #fff;
	}
	
	.content .desc img {
		width: 0.16rem;
		height: 0.16rem;
	}
	
	.stract {
		position: absolute;
		border-radius: 0.1rem;
		margin: 0 0.26rem;
		top: 7.28rem;
		height: 1.78rem;
		background: #fff;
		line-height: 0.53rem;
		color: #777;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-break: break-all;
		padding: 0.4rem 0.32rem;
		font-size: 0.34rem;
		overflow: hidden;
		box-shadow: 0 0 4px rgba(0, 0, 0, .1);
	}
	
	.shopWrap {
		width: 100%;
		/*margin-top: 1.38rem;*/
	}
	
	.shopWrap .title_tab {
		width: 100%;
		height: 1.17rem;
	}
	
	.shopWrap .title_tab>ul {
		width: 100%;
		overflow: hidden;
		padding: 0 0.88rem;
		height: 1.06rem;
		background: #fff;
	}
	
	.shopWrap .title_tab>ul li {
		float: left;
		margin-right: 1.86rem;
		height: 100%;
		color: #333;
		font-size: 0.4rem;
		height: 1.06rem;
		line-height: 1.06rem;
	}
	
	.shopWrap .title_tab>ul li:last-child {
		margin-right: 0;
	}
	
	.shopWrap .title_tab>ul li.active {
		color: #a30000;
		border-bottom: solid 1px #A30000;
	}
	
	.shopWrap .storeWrap {
		width: 100%;
	}
	
	.shopWrap .storeWrap ul {
		width: 100%;
		overflow: hidden;
	}
	
	.shopWrap .storeWrap ul li {
		width: 100%;
		padding: 0.2rem;
		height: 4.8rem;
		padding: 0.2rem 0.2rem 0;
		position: relative;
		overflow: hidden;
	}
	
	.shopWrap .storeWrap ul li .bg_img {
		width: 100%;
		height: 100%;
	}
	
	.shopWrap .storeWrap ul li .zhe {
		width: 96%;
		margin: 0 auto;
		height: 100%;
		position: absolute;
		margin-top: 0.2rem;
		top: 0;
		background: rgba(0, 0, 0, 0.3);
	}
	
	.shopWrap .storeWrap ul li .zhe .zhe_img {
		width: 7.22rem;
		height: 2.4rem;
		margin: 0 auto;
		margin-top: 0.8rem;
		position: relative;
	}
	
	.shopWrap .storeWrap ul li .zhe .zhe_img img {
		width: 100%;
		height: 100%;
	}
	
	.shopWrap .storeWrap ul li .zhe .zhe_img p {
		position: absolute;
		top: 0.98rem;
		width: 100%;
		color: #fff;
		font-size: 0.4rem;
	}
	
	.shopWrap .storeWrap ul li .zhe .zhe_img p span {
		margin-left: 1.65rem;
	}
	
	.shopWrap .storeWrap ul li .zhe .zhe_img p b {
		font-weight: normal;
		margin-left: 0.8rem;
	}
	
	.shopWrap .storeWrap ul li .zhe .recom {
		background: #da4240;
		color: #fff;
		width: 1.76rem;
		height: 0.53rem;
		font-size: 0.32rem;
		margin-left: 0.26rem;
		display: inline-block;
		line-height: 0.53rem;
		text-align: center;
		border-bottom-left-radius: 0.1rem;
		border-bottom-right-radius: 0.1rem;
	}
	
	.shopWrap .storeWrap ul li .zhe .advance {
		position: absolute;
		bottom: 0.4rem;
		overflow: hidden;
		color: #fff;
		font-size: 0.32rem;
		width: 100%;
	}
	
	.shopWrap .storeWrap ul li .zhe .advance .left {
		float: left;
		margin-left: 0.26rem;
	}
	
	.shopWrap .storeWrap ul li .zhe .advance .right {
		float: right;
		margin-right: 0.26rem;
	}
	
	.selling {
		width: 100%;
		height: 100%;
	}
	
	.selling ul {
		width: 100%;
		padding: 0.26rem;
		overflow: hidden;
		background: #fff;
	}
	
	.selling ul li {
		position: relative;
		float: left;
		width: 4.61rem;
		/*height: 4.48rem;*/
		margin-bottom: 0.26rem;
	}
	
	.selling ul li:nth-child(even) {
		margin-left: 0.18rem;
	}
	
	.selling ul li .list_bg {
		width: 4.61rem;
		height: 5.54rem;
	}
	
	.selling ul li .Info {
		width: 100%;
		position: absolute;
		top: 0;
		width: 100%;
		height: 5.54rem;
	}
	
	.selling ul li .Info>span {
		background: #da4240;
		color: #fff;
		width: 1.41rem;
		height: 0.53rem;
		font-size: 0.32rem;
		margin-left: 0.26rem;
		display: inline-block;
		line-height: 0.53rem;
		text-align: center;
		border-bottom-left-radius: 0.1rem;
		border-bottom-right-radius: 0.1rem;
	}
	
	.selling ul li .Info p {
		position: absolute;
		bottom: 0;
		line-height: 0.66rem;
		height: 0.66rem;
		width: 100%;
		overflow: hidden;
		background: rgba(0, 0, 0, 0.3);
	}
	
	.selling .count-down {
		color: #fff;
		height: 0.53rem;
		margin-left: 0.26rem;
	}
	
	.selling ul li .desc {
		width: 100%;
		border: solid 1px #e6e6e6;
		border-top: none;
		padding-left: 0.21rem;
	}
	
	.selling ul li .desc .title {
		width: 100%;
		overflow: hidden;
		font-size: 0.34rem;
		color: #333;
		height: 0.45rem;
		overflow: hidden;
	}
	
	.selling ul li .desc .price {
		margin: 0.26rem 0;
	}
	
	.selling ul li .desc .price span {
		color: #aaa;
		font-size: 0.29rem;
	}
	
	.selling ul li .desc .price b {
		color: #cd302e;
		margin-left: 0.13rem;
		font-size: 0.34rem;
	}
</style>